<template>
	<view class="wrap">

		<u-navbar :is-back="false" :border-bottom="false" back-icon-color="#fff" title="个人中心" title-size="36"
			title-color="#fff" :background="background">

			<view @click="goback" class="slot-wrap">
				<image  class="back" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/21.png"
					mode=""></image>
			</view>
		</u-navbar>

		<view class="header">
			<view class="photo">
				<image class="img" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a8.png"
					mode="widthFix"></image>
			</view>
			<view v-if="infos" class="nameBox">
				<view class="names">
					{{infos.username}}
				</view>
				<view class="desc">
					<text>ID：{{infos.mbNo}}</text>
				</view>
			</view>
			<view @click="login" v-else class="nameBox" style="color: #fff;">
				未登录，去登录<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view>
		</view>
		<view class="handle">
			<view class="item" @click="nav(item)" :key="index" v-for="(item,index) in list">
				<view class="left">
					<image class="icon" :src="item.icon" mode="widthFix">
					</image>
					{{item.name}}
				</view>

				<view class="right">
					<image class="more" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/28.png" mode="widthFix">
					</image>

				</view>
			</view>
		</view>
		
		<!-- <button @click="go">跳转</button> -->
		
		<!-- 加入qq -->
		<u-popup border-radius="29" v-model="kfStatus" mode="center">
			<view class="qq">
				<kf   />
			</view>
			<image @click="kfStatus=false" class="close" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/32.png" mode=""></image>
		</u-popup>
		
	</view>

</template>
<script>
	import kf from '../my/kf.vue'
	export default {
		components: {
			kf
		},
		data() {
			return {
				
				kfStatus: false,
				background: {
					background: "",

					// 	background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/9.png) no-repeat',
					// 	// 还可以设置背景图size属性
					// 	backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(180deg, #417CF4 0%, #84ACFF 100%)'
				},
				infos:null,
				info: {
					headpic: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/27.png',
				},


				list: [{
						id: 1,
						name: '我的订单',
						desc: '',
						url: '/pages/sys/my/order',
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a7.png'
					}, {
						id: 2,
						name: '联系客服',
						desc: '',
						url: '/pages/sys/user/setting',
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a2.png'
					},
					// {
					// 	id: 3,
					// 	name: '关于我们',
					// 	  route: `/pages/common/webview?url=http://app.quncenter.com/html/yxdc-yszc.html&name=关于我们`,
					// 	url: '/pages/sys/user/comment',
					// 	icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a3.png'
					// },
					{
						id: 3,
						name: '关于我们',
					
						// flag: 2,
						// url: "",
						  route: `/pages/common/webview?url=https://admin.yishengyang.cn/html/aboutus.html&name=关于我们`,
						url: '/pages/sys/user/comment',
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a3.png'
					},
					{
						id: 4,
						name: '常见问题',
						url: '/pages/sys/user/cashrecord',
						route: `/pages/common/webview?url=https://admin.yishengyang.cn/html/problem.html&name=常见问题`,
						
						desc: '',
						
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a4.png'
					}, {
						id: 5,
						name: '隐私政策',
						desc: '',
						route: `/pages/common/webview?url=https://admin.yishengyang.cn/html/yszc.html&name=隐私政策`,
						url: '/pages/sys/user/team',
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a5.png'
					}, {
						id: 6,
						name: '用户协议',
						desc: '',
						route: `/pages/common/webview?url=https://admin.yishengyang.cn/html/policy.html&name=用户协议`,
						url: '/pages/sys/user/level',
						icon: 'https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a6.png'
					}
				]
			};
		},
		onLoad() {
			
			
			
			// this.getmytopmsg()
			if(this.vuex_token){
				this.infos = this.vuex_user
			}
			console.log(this.infos,44222);
			

		},
		methods: {
			go(){
				
				
					uni.navigateToMiniProgram({
					    appId: 'wx0e6ed4f51db9d078',
					    // path: 'pages/home/homepage',
						path:'pages/hotel/detail/index.html?biz=1&id=85786379&fcpGUID=fcp_navigateTo_73&pubRouteBegin=1704640036048&cityid=41',
					    //develop开发版；trial体验版；release正式版
					    envVersion: 'release', 
					    success(res) {
					      // 打开成功
					      console.log("跳转小程序成功！",res);
					    } 
					})

			},
			login(){
				uni.navigateTo({
					url:"/pages/sys/main/login"
				})
			},
			goback() {
				uni.reLaunch({
					url: "/pages/sys/main/index"
				})
			},

			onReady() {
				uni.hideTabBar();
			},
			godetail(val) {
				uni.navigateTo({
					url: "/pages/sys/user/zijindetail?type=" + val
				})
			},

			getmytopmsg() {
				this.$u.api.mytopmsg().then(res => {

					if (res.code == 200) {
						console.log(res, 9999999)
						this.info = res.data
					}

				})
			},


			nav(url) {
				
				
				if (url.id == 1) {
					
					if(!this.vuex_token){
						uni.navigateTo({
							url:"/pages/sys/main/login"
						})
						
						return
					}
					uni.navigateTo({
						url:url.url,
					});
				} 
				 else if (url.id == 2) {
					this.kfStatus = true
				} else{
					uni.navigateTo({
						url: url.route,
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-drawer__scroll-view{
		height: inherit !important;
	}
	/deep/ .u-mode-center-box{
		background: none !important;
	}
	.slot-wrap{
		position: relative;
		z-index: 99999;
		width: 90px;
		height: 40px;
		// background: red;
		display: flex;
		align-items: center;
		
	}
	.close{
		width: 65rpx;
		height: 65rpx;
		display: block;
		// background: rgba(255,255,255,0.8);
		margin: 46rpx auto;
	}
	.back {
		width: 30rpx;
		height: 46rpx;
		margin-left: 40rpx;
	}

	.wrap {
		background: url("https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/a1.png") no-repeat;
		// background-position: top left;
		background-size: 750rpx 403rpx;

		.header {
			display: flex;
			align-items: center;
			padding: 50rpx 32rpx 34rpx;

			.photo {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 28rpx;
				overflow: hidden;
				border: 1px solid #efefef;

				.img {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.nameBox {
				flex: 1;

				.names {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38rpx;
					margin-bottom: 9rpx;
				}

				.desc {
					display: inline-flex;

					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A95100;

					text {
						background: linear-gradient(151deg, #FFEB99 0%, #E7B84E 100%);
						font-size: 20rpx;
						transform: scale(0.9);
						padding: 4rpx 13rpx;
						border-radius: 20px;
					}

				}
			}
		}





		.handle {
			border-radius: 32rpx;
			background: #fff;
			padding: 43rpx 40rpx;

			.item {
				margin-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;

					.icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 30rpx;
					}

					font-size: 28rpx;
					font-family: PingFang SC-Regular,
					PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 28rpx;

					.more {
						width: 14rpx;
						height: 7rpx;
						margin-left: 18rpx;
					}
				}
			}
		}
	}
</style>
